<template>
  <div>
    <el-card shadow="hover" style="height: 580px">
      <el-row style="margin-left: 10%">
        <el-col :span="12">
          <div id="mycharts" ref="myRef" class="chart-box" />
        </el-col>
        <el-col :span="12">
          <div id="mycharts1" ref="myRef" class="chart-box" />
        </el-col>
        <el-col :span="12">
          <div id="mycharts2" ref="myRef" class="chart-box" />
        </el-col>
        <el-col :span="12">
          <div id="mycharts3" ref="myRef" class="chart-box" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { ref, onMounted, inject, computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "echarts",
  setup() {
    let echarts = inject("ec");
    const store = useStore();

    const myRef = ref(null);
    const initT = () => {
      const infoData = computed(() => store.state.infoData);
      const infoLevel = computed(() => store.state.levelData);
      const infoDay = computed(() => store.state.dayData);
      let levelD = ref([]);
      let levelName = ref([]);
      infoLevel.value.forEach((item) => {
        levelD.value.push({ name: item.name, value: item.count });
        levelName.value.push(item.name);
      });

      let OptionD = [infoData.value[4], infoData.value[5]];
      let OptionName = [infoData.value[4].name, infoData.value[5].name];
      let OptionD1 = [infoData.value[6], infoData.value[8],infoData.value[9],infoData.value[10],infoData.value[7]];
      let OptionName1 = [infoData.value[6].name, infoData.value[8].name,infoData.value[9].name,infoData.value[10].name, infoData.value[7].name];
      let OptionD2 = [
        levelD.value[0],
        levelD.value[1],
        levelD.value[2],
        levelD.value[3],
      ];
      let OptionName2 = [
        levelD.value[0].name,
        levelD.value[1].name,
        levelD.value[2].name
      ];
      let OptionD3 = [infoDay.value[0], infoDay.value[1], infoDay.value[2]];
      let OptionName3 = [
        infoDay.value[0].name,
        infoDay.value[1].name,
        infoDay.value[2].name,
      ];

      const myChart = echarts.init(document.getElementById("mycharts"));
      const myChartI = echarts.init(document.getElementById("mycharts1"));
      const myChartII = echarts.init(document.getElementById("mycharts2"));
      const myChartIII = echarts.init(document.getElementById("mycharts3"));

      myChartII.setOption({
        color: ["rgb(33, 161, 235)", "rgb(138, 185, 212)"],
        title: {
          // text: "Referer of a Website",
          subtext: "住院病人男女比例",
          left:40,
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          top: 220,
          right: 150,
          y: "bottom" /*在垂直方向上的底部*/,
          data: OptionName,
        },

        series: [
          {
            type: "pie", //饼状图
            center: ["30%", "40%"], //显示位置
            name: "",
            radius: ["0%", "55%"] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              // normal: {
              //   borderWidth: 0 /*隔开的白色边界*/,
              //   borderColor: "#fff" /*border*/,
              //   // labelLine :{show:true}
              // },
            },

            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 16, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: OptionD,
          },
        ],
      });
      myChartI.setOption({
        color: ["rgb(142, 230, 130)", "rgb(164, 197, 159)","rgb(8, 49, 6)","rgb(47, 88, 44)","rgb(14, 136, 7)"] /*饼状图的颜色*/,
        title: {
          // text: "Referer of a Website",
          subtext: "住院病人年龄结构",
          left:40,
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          top: 220,
          // orient: "vertical",
          right: "45%" ,
          y: "bottom" /*在垂直方向上的底部*/,
          data: OptionName1,
        },
        series: [
          {
            type: "pie", //饼状图
            center: ["30%", "40%"], //显示位置
            name: "",
            radius: ["0%", "55%"] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                borderWidth: 0 /*隔开的白色边界*/,
                borderColor: "#fff" /*border*/,
                // labelLine :{show:true}
              },
            },

            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 16, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: OptionD1,
          },
        ],
      });
      myChart.setOption({
        color: [
          "rgb(240, 150, 65)",
          "rgb(212, 175, 132)",
          "rgb(248, 210, 174)",
          "rgb(221, 200, 181)",
        ] /*饼状图的颜色*/,
        title: {
          // text: "Referer of a Website",
          subtext: "住院病人等级比例",
          left:40,
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          top: 220,
          left: "auto" /*标签文字排成一行*/,
          y: "bottom" /*在垂直方向上的底部*/,
          data: OptionName2,
        },
        series: [
          {
            type: "pie", //饼状图
            center: ["30%", "40%"], //显示位置
            name: "",
            radius: ["0%", "55%"] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                borderWidth: 0 /*隔开的白色边界*/,
                borderColor: "#fff" /*border*/,
                // labelLine :{show:true}
              },
            },
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 16, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: OptionD2,
          },
        ],
      });
      myChartIII.setOption({
        color: [
          "rgb(245, 99, 155)",
          "rgb(129, 87, 103)",
          "rgb(170, 139, 151)",
        ] /*饼状图的颜色*/,
        title: {
          // text: "Referer of a Website",
          subtext: "住院病人天数比例",
          left:40,
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          top: 210,
          right: "38%",
          y: "bottom" /*在垂直方向上的底部*/,
          data: OptionName3,
        },
        series: [
          {
            type: "pie", //饼状图
            center: ["30%", "40%"], //显示位置
            name: "",
            radius: ["0%", "55%"] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                borderWidth: 0 /*隔开的白色边界*/,
                borderColor: "#fff" /*border*/,
                // labelLine :{show:true}
              },
            },
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 16, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: OptionD3,
          },
        ],
      });
    };
    onMounted(() => {
      var t;
      clearTimeout(t);
      t = setTimeout(function () {
        initT();
      }, 1000);
    });
	console.log(myRef)
    return {
      myRef,
    };
  },
};
</script>
<style lang="css" scoped>
.chart-box {
  width: 300px;
  height: 300px;
  color: rgb(14, 136, 7);
}
</style>